{% load static %}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
		<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}"/>
		<link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}">
		<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
		<script src="{% static 'js/bootstrap.bundle.js' %}" type="text/javascript" charset="utf-8"></script>
		<script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript" charset="utf-8"></script>
		
	</head>
<body>
		<!-- 导航 -->
<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"
         style="background: linear-gradient(to right,#aa4b6b,#6b6b83,#3b8d99);">
        <a class="navbar-brand" href="#"><strong class="text-danger">SmartIdPhotos</strong></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
                aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="/index"><i class="fa fa-home"></i>首页 <span
                            class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/detail"><i class="fa fa-commenting"></i>案例</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog"><i class="fa fa-building"></i>博客</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/tool"><i class="fa fa-phone"></i>工具箱</a>
                </li>
            </ul>
            <span class="navbar-text">

			  <p><i class="fa fa-phone-square"></i>问题反馈:1902612430</p>
		    </span>
        </div>
    </nav>
</header>


        <!-- 案例展示 -->
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <h1 class="display-4 text-center">案例展示</h1>
                <p class="lead text-center">------case show------</p>
                <div class="row row-cols-1 row-cols-md-4">
                    {% for img in images %}
                        <div class="col mb-4">
                            <div class="card h-100">
                                <img src="{{ MEDIA_URL }}{{ img.pic }}" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">名称:{{ img.name }}</h5>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>


  </div>
</div>

		
<!-- 页脚 -->
<footer id="task6">
    <div class="jumbotron jumbotron-fluid bg-light">
        <div class="container text-center">
            <h1 class="display-4 text-dark"><strong>ABOUT</strong></h1>
            <p class="lead"></p>
        </div>

        <div class="card-group border border-light">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-center"><strong>简介</strong></h5>
                    <p class="card-text">基于PYTHON的智能证件照系统，该站点为黔南民族师范学院2017级物联网工程专业学生李国发毕业设计，
                        该系统仅用于学习交流。同时也能给更多的同学提供一个功能丰富，简单免费的证件照智能换底工具。
                    </p>

                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-center"><strong>位置信息</strong></h5>
                    <div class="place" style="margin-left: 230px">
                        <span class="fa fa-map-marker"></span>
                        <span class="text">地址:黔南民族师范学院</span>
                    </div>
                    <div class="phone" style="margin-left: 230px">
                        <span class="fa fa-user"></span>
                        <span class="text">指导老师:罗文兴教授</span>
                    </div>
                    <div class="email" style="margin-left: 230px">
                        <span class="fa fa-envelope"></span>
                        <span class="text">邮箱:1902612430@qq.com</span>
                    </div>

                    <div class="weibo" style="margin-left: 230px">
                        <span class="fa fa-weibo"></span>
                        <span class="text">简书:pythonJam</span>
                    </div>
                </div>


            </div>
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title text-center"><strong>学习交流群</strong></h5>
                    <img src="{% static 'img/code.png' %}" style="width: 150px;height: 150px">
                    <p class="card-text text-center">请扫描上方二维码</p>
                </div>
            </div>
        </div>
        <p class="text-center text-secondary">Copyright<i class="fa fa-registered"></i>黔南民族师范学院2017级物联网工程专业
        </p>
    </div>
</footer>


</body>

</html>